Blog base
docusaurus 博客基础
1.md 文件文字换行
markdown 文件文字换行
双空格+换行打字
2.代码块
代码块
点点点
后加要 highlight 的语言类型,换行 copy 你的代码,再换行用点点点
收尾【相当于 pre 标签】
```js
var handsome;
```;
3.发布多个 blog
在 config.js 中声明,如下所示:
/static/docusaurus.config.js
plugins: [
[
'@docusaurus/plugin-content-blog',
{
/**
* 多实例插件必填。
*/
id: 'second-blog',
/**
* 你的网站上博客的 URL 路由。
* *请务必不要*添加末尾斜杠。
*/
routeBasePath: 'my-second-blog',
/**
* 相对于站点目录的文件系统路径。
*/
path: './my-second-blog',
},
],
],
4.告示类
p.s. 避免 prettier 将代码格式化成错误语法的影响,还是多空两行比较保险
:::note
一些包含 _Markdown_ `语法` 的 **内容**。 看看[这个 `api`](#4告示类)。
:::
:::tip
一些包含 _Markdown_ `语法` 的 **内容**。 看看[这个 `api`](#4告示类)。
:::
:::info
一些包含 _Markdown_ `语法` 的 **内容**。 看看[这个 `api`](#4告示类)。
:::
:::caution
一些包含 _Markdown_ `语法` 的 **内容**。 看看[这个 `api`](#4告示类)。
:::
:::danger
一些包含 _Markdown_ `语法` 的 **内容**。 看看[这个 `api`](#4告示类)。
:::
备注
一些包含 Markdown 语法
的 内容。 看看这个 api
。
提示
一些包含 Markdown 语法
的 内容。 看看这个 api
。
信息
一些包含 Markdown 语法
的 内容。 看看这个 api
。
警告
一些包含 Markdown 语法
的 内容。 看看这个 api
。
危险
一些包含 Markdown 语法
的 内容。 看看这个 api
。
5.颜色生成器
是个人都不会喜欢最初始给你的颜色主题吧【🐶.jpg】
于是乎,你可以在下面选择你喜欢的颜色,微调,就可以得到一个颜色主题(一系列颜色);你甚至可以直接在该页面预览,你会发现这个博客已经被替换成你的目标颜色主题了。
它会自动生成代码,你可以将其复制到你的 src\css\custom.css 文件,覆盖掉原有的样式。
提示
主色调最好至少有 WCAG-AA contrast ratio 对比度,以保证可读性。你可以用 Docusaurus 自己的网站来预览你的配色的效果。深色模式下,你可以换一套配色,因为同一种颜色一般不能在浅色和深色模式下都保持足够的可读性。
CSS Variable Name | Hex | Adjustment | Contrast Rating |
---|---|---|---|
--ifm-color-primary-lightest | #ffffff | AAA 🏅 | |
--ifm-color-primary-lighter | #d4fcf4 | AAA 🏅 | |
--ifm-color-primary-light | #c1fbf0 | AAA 🏅 | |
--ifm-color-primary | #9bf9e6 | 0 | AAA 🏅 |
--ifm-color-primary-dark | #75f7dc | AAA 🏅 | |
--ifm-color-primary-darker | #62f6d8 | AAA 🏅 | |
--ifm-color-primary-darkest | #29f2c9 | AAA 🏅 |
把 src/css/custom.css
中的变量替换成这些新变量。
自动生成代码:覆盖并替换 /src/css/custom.css
[data-theme='dark'] {
--ifm-color-primary: #9bf9e6;
--ifm-color-primary-dark: #75f7dc;
--ifm-color-primary-darker: #62f6d8;
--ifm-color-primary-darkest: #29f2c9;
--ifm-color-primary-light: #c1fbf0;
--ifm-color-primary-lighter: #d4fcf4;
--ifm-color-primary-lightest: #ffffff;
}